---
title: Upload your photo
name: Upload your photo (with confirmation page)
scenario: |
  As part of an online service, you are asked to upload your photo.

  Things to try:

  1. Intentionally avoid uploading a file and accepting terms and conditions before continuing to the next page.
---

{# This example is based of the live "Passport" service: https://www.passport.service.gov.uk/photo/upload #}
{% extends "layouts/full-page-example.njk" %}

{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{% set pageTitle = example.title %}
{% block pageTitle %}{{ "Error: " if errorSummary | length }}{{ pageTitle }} - GOV.UK{% endblock %}

{% block header %}
  {{ govukHeader({
    serviceName: "Apply for a passport"
  }) }}
{% endblock %}

{% block beforeContent %}
  {{ govukPhaseBanner({
    tag: {
      text: "Beta"
    },
    html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
  }) }}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
        <form method="post" novalidate>
            {% if errorSummary | length %}
              {{ govukErrorSummary({
                titleText: "There is a problem",
                errorList: errorSummary
              }) }}
            {% endif %}

            <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>

            <p class="govuk-body">
                Your photo will now go through an automated check.
            </p>

            <p class="govuk-body">
                You’ll need to review it before you add the photo to your application.
            </p>

            {{ govukFileUpload({
                id: "photo",
                name: "photo",
                label: {
                    text: "Upload your photo"
                },
                hint: {
                    text: "Your photo must be at least 50KB and no more than 10MB"
                },
                errorMessage: errors["photo"],
                javascript: true
            }) }}

            {{ govukCheckboxes({
                idPrefix: "terms-and-conditions",
                name: "terms-and-conditions",
                items: [
                    {
                        value: "true",
                        html: 'I accept the <a class="govuk-link" href="#">terms and conditions</a>'
                    }
                ],
                values: values["terms-and-conditions"],
                errorMessage: errors["terms-and-conditions"]
            }) }}

            {{ govukButton({
                text: "Submit your photo"
            }) }}
        </form>
    </div>
  </div>
{% endblock %}
